<nz-layout class="fixg">
  <nz-header>
    <app-header #header></app-header>
  </nz-header>
  <nz-layout>
    <div id="mainHeight" style="overflow-y: auto">
      <div class="warp" nz-row>
        <div nz-col nzSpan="17">
          <div class="d-header">
            <nz-avatar class="d-h-src" [nzSrc]="blogData?.userInfo?.userImgurl"></nz-avatar>
            <button class="d-h-button">关注</button>
            <div class="d-h-content">
              <h3>{{blogData?.userInfo?.userNickname}}</h3>
              <p><span>{{blogData?.blog?.blogCreatedTime | date: 'y年MM月dd日'}}</span><span>阅读
                  {{blogData?.blog?.blogView}}</span>
              </p>
            </div>

          </div>
          <div class="content">
            <h1 style="text-align:center">{{blogData?.blog?.blogTitle}}</h1>
            <div id="editormd-view">
              <textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>
            </div>

          </div>
          <div [class]="blogData?.isliker?'footer likered':'footer'">
            <button nz-button nzType="primary" nzShape="circle" [title]="blogData?.isliker?'取消点赞':'点赞'"
              (click)="addLikes(blogData?.isliker)">赞</button>
          </div>
          <div class="comment">
            <h2 class="comment-title">{{blogData?.allCommentCount}}条评论</h2>

            <nz-list *ngIf="commentData.length" [nzDataSource]="commentData" [nzRenderItem]="item"
              [nzItemLayout]="'horizontal'">
              <ng-template #item let-item>
                <nz-comment [nzAuthor]="authorTemplate" [nzDatetime]="item.commentCreatedTime | date: 'y年MM月dd日'">
                  <ng-template #authorTemplate>
                    <span *ngIf="item.commentUser.userName===user.userName" class="author-span">作者</span>
                    {{item.commentUser.userNickname==''?item.commentUser.userName:item.commentUser.userNickname}}
                  </ng-template>
                  <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="item.commentUser.userImgurl"></nz-avatar>
                  <nz-comment-content>
                    <p>{{ item.commentContent }}</p>
                  </nz-comment-content>
                  <nz-comment-action>
                    <i nz-tooltip [nzTitle]="item.isLike?'取消点赞':'点赞'" nz-icon type="like"
                      [class]="item.isLike?'liker':'defailt'" [nzTheme]="item.commentLikeCount > 0 ? 'fill' : 'outline'"
                      (click)="like(item.commentId,item.isLike)"></i>

                    <span
                      [class]="item.isLike?'liker count like':'count like'">({{ item.commentLikeCount==null?'0':item.commentLikeCount  }})</span>
                  </nz-comment-action>
                  <nz-comment-action><span (click)="addReplayTemplate(item.index)">回复</span></nz-comment-action>
                  <div *ngIf="item.children && item.children.length" style="background:#fafbfc" class="comment-child">
                    <div *ngFor="let data of item.children">
                      <nz-comment [nzAuthor]="authorTemplate" [nzDatetime]="data.commentCreatedTime | date: 'y年MM月dd日'">
                        <ng-template #authorTemplate>
                          <span *ngIf="data.commentUser.userName===user.userName" class="author-span">作者</span>
                          {{data.commentUser.userNickname==''?data.commentUser.userName:data.commentUser.userNickname}}
                        </ng-template>
                        <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="data.commentUser.userImgurl">
                        </nz-avatar>
                        <nz-comment-content>
                          <p>{{ data.commentContent }}</p>
                        </nz-comment-content>
                        <nz-comment-action>
                          <i nz-tooltip [nzTitle]="data.isLike?'取消点赞':'点赞'" nz-icon type="like"
                            [class]="data.isLike?'liker':'defailt'"
                            [nzTheme]="data.commentLikeCount > 0 ? 'fill' : 'outline'"
                            (click)="like(data.commentId,data.isLike)"></i>

                          <span
                            [class]="data.isLike?'liker count like':'count like'">({{ data.commentLikeCount==null?'0':data.commentLikeCount }})</span>
                        </nz-comment-action>
                        <nz-comment-action><span (click)="addReplayTemplate(item.index,data)">回复</span>
                        </nz-comment-action>
                      </nz-comment>
                    </div>
                  </div>
                  <div *ngIf="item.ishow!=null&&item.ishow==true" class="replay-com" nz-row>
                    <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
                      <input type="text" [(ngModel)]="replayValue" nz-input placeholder="文明用语" />
                    </nz-input-group>
                    <ng-template #suffixIconButton>
                      <button nz-button nzType="primary" (click)="submitCom(item.commentId)" nzSearch>添加回复</button>
                    </ng-template>

                  </div>
                  <nz-divider nzDashed="true" style="margin: 0"></nz-divider>
                </nz-comment>
              </ng-template>
            </nz-list>
            <nz-comment>
              <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="user.avatar"></nz-avatar>
              <nz-comment-content>
                <nz-form-item>
                  <textarea [(ngModel)]="inputValue" nz-input rows="4"></textarea>
                </nz-form-item>
                <nz-form-item>
                  <button nz-button nzType="primary" [nzLoading]="submitting" [disabled]="!inputValue"
                    (click)="handleSubmit()">
                    添加评论
                  </button>
                </nz-form-item>
              </nz-comment-content>
            </nz-comment>

          </div>
        </div>
        <div nz-col nzSpan="5">
          <div class="author-info">
            <nz-divider nzText="关于作者" nzOrientation="left"></nz-divider>
            <nz-avatar class="d-h-src" [nzSrc]="blogData?.userInfo?.userImgurl"></nz-avatar>
            <div class="d-h-content">
              <h3>{{blogData?.userInfo?.userNickname}}</h3>
              <p>{{blogData?.userInfo?.userDeclaration}}
              </p>
            </div>
            <p><i nz-icon nzType="like" nzTheme="twotone"></i> 获得点赞数
              <span>{{blogData?.blogLikeCount ||"0"}}</span></p>
            <p><i nz-icon nzType="heart" nzTheme="twotone"></i> 获得关注数
              <span>{{blogData?.userInfo?.likeCount ||"0"}}</span></p>
            <p><i nz-icon nzType="eye" nzTheme="twotone"></i> 文章被阅读
              <span>{{blogData?.userInfo?.likeCount ||"0"}}</span></p>
          </div>
          <div class="catalog">目录</div>
          <div id="toHtml" #toHtml class="catalog-body"></div>
        </div>
      </div>
    </div>

  </nz-layout>
</nz-layout>
